<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style type="text/css">
	header{
		position: relative;
		width: 100%;
		height: 50px;
		background-color: #669999;
	}
	header .left{
		font-size: 16px;
		position: absolute;
		top: 13px;
		bottom: 0;
		left: 8px;
		width: 100px;
		height: 50px;
	}
	header .left img{
		width: 24px;
	}
	header .center{
		font-size: 18px;
		position: absolute;
		top: 16px;
		left: 0;
		right: 0;
		color: #fff;
		letter-spacing: 8px;
	}

	footer{
		position: fixed;
		width: 100%;
		height: 50px;
		bottom: 0;
		background-color: #669999;
		margin: 0 auto;
	}
	footer div{
		margin: 0 auto;
		text-align: center;
	}
	footer span{
		line-height: 50px;
		color: #fff;
		margin: 0 10px;
	}
	footer .num{
		color: #ccc;
	}
	#content{
		margin: 0 auto;
		padding-bottom: 50px;
    margin-top: 10px;
		width: 90%;
	}
  #content .lists{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #669999;
  }
  .contentlist img{
    width: 100%;
  }
  .userlist{
    width: 100%;
  }
  .userlist div{
    display: inline-block;
  }
  .userlist .username{
    position: absolute;
    top: 20px;
    color: #5E5E5E;
    left: 50px;
  }
  .userlist img{
    width: 40px;
    border-radius: 20px;
  }
  p{
    color: #767676;
    font-size: 14px;
  }
</style>
<body>
	<header>
   		<div class="left" id="leftBtn">
			<img src="../image/back.png">
   		</div>
   		<div class="center">学院论坛</div>
   		<div class="right"></div>
   	</header>

   	<div id="content">
   	  <div class="lists">
        <div class="userlist">
          <div>
            <img src="../image/head.jpg">
          </div>
          <div class="username">
            201558234080  <small style="color: #ccc;">17:44</small>
          </div>
        </div>
        <div class="contentlist">
          <img src="../image/bc.jpg">
          <p>该睡觉了</p>
        </div>
      </div>

      <div class="lists">
        <div class="userlist">
          <div>
            <img src="../image/db9e6651c57b593db07ea6ee7a1d4cda.jpg">
          </div>
          <div class="username">
            201558234044  <small style="color: #ccc;">01:44</small>
          </div>
        </div>
        <div class="contentlist">
          <img src="../image/UgY18DW.jpg">
          <p>深夜继续努力</p>
        </div>
      </div>

      <div class="lists">
        <div class="userlist">
          <div>
            <img src="../image/461035860-421117581be15ec.jpg">
          </div>
          <div class="username">
            201558234012  <small style="color: #ccc;">17:42</small>
          </div>
        </div>
        <div class="contentlist">
          <p>昨晚在路边停车等人，有个脑袋探到窗边问：“走吗？”
我心想：我TM又不是来拉客的黑车，于是说：“不走！”
过了一会儿他递进来一张罚单。。。</p>
        </div>
      </div>

      <div class="lists">
        <div class="userlist">
          <div>
            <img src="../image/64589888423d6f9163d939276.jpg">
          </div>
          <div class="username">
            201558234080  <small style="color: #ccc;">17:44</small>
          </div>
        </div>
        <div class="contentlist">
          <p>上班，在电梯看到同事拿着袋小笼包走进来，微笑着问我：“吃早餐了吗？”
我感动的伸出双手：“还没呢。”
他赶紧手一缩：“我也还没呢。”</p>
        </div>
      </div>
   	</div>
</body>

<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function(){
    	var w = $(window).width();
  		var h = $(window).height();
  		$(".center").css("left",(w-72)/2 + "px");
  		$("#head").css("left",(w-80)/2 + "px");
   	};

   	$("#leftBtn").click(function(){
   		api.openWin({
         	name: 'main',
            url: '../html/main.html',
            bounces: true,
  		});
   	});
</script>
</html>